<template>
	<div>
		<div class="pay" v-for="(item,index) in list" :key="index" v-if="list && list.length > 0">
			<img class="pay_bg" src="../../static/img/order/bg.png">
			<div class="pay_1">
				<div>订单号：{{item.order_sn}}</div>
				<div>待支付</div>
			</div>
			<div class="pay_2">
				<div>收费月份:</div>
				<div>{{item.time_slot}}</div>
			</div>
			<div class="pay_3">
				<div>应付金额：</div>
				<div>¥ {{item.order_amount}}</div>
			</div>
			<div class="pay_4">   
				<div>*请按时转款，以保障机器有序运转！</div> 
				<div @click="xiangQ(item.id)">去转账</div>
			</div>
		</div>
		<div  v-if="list && list.length < 1">
			<noContent></noContent>
		</div>
	</div>

</template>

<script>
import noContent from "../components/noContent"
export default {
	data() {
		return {};
	},
	components: {
		noContent
	},
	props:["list"],
	methods: {
		xiangQ(id){
			wx.navigateTo({
				url:'../../pages/details/main?getId='+id
			})
		}
	},

  	created() {},
  	mounted() {
	}
};
</script>

<style scoped>
.pay {
  width: 690rpx;
  height: 400rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
  position: relative;
}
.pay_bg {
  width: 690rpx;
  height: 400rpx;
  position: absolute;
}
.pay_1,
.pay_2,
.pay_3,
.pay_4 {
  position: absolute;
}
.pay_1 {
  height: 80rpx;
  width: 630rpx;
  margin-left: 30rpx;
  line-height: 80rpx;
}
.pay_2 {
  height: 80rpx;
  width: 630rpx;
  margin-left: 30rpx;
  line-height: 80rpx;
  margin-top: 85rpx;
}
.pay_3 {
  height: 80rpx;
  width: 630rpx;
  margin-left: 30rpx;
  line-height: 80rpx;
  margin-top: 170rpx;
}
.pay_4 {
  width: 630rpx;
  height: 100rpx;
  margin-top: 270rpx;
  margin-left: 30rpx;
}
.pay_1 div:nth-of-type(1) {
  float: left;
  font-size: 28rpx;
  color: #999999;
  /* width: 400rpx; */
  width: 80%;
}
.pay_1 div:nth-of-type(2) {
  float: right;
  color: #ff5858;
  font-size: 28rpx;
  text-align: right;
  /* width: 230rpx; */
  width: 20%;
}
.pay_2 div:nth-of-type(1) {
  float: left;
  font-size: 28rpx;
  color: #333333;
  width: 180rpx;
}
.pay_2 div:nth-of-type(2) {
  float: right;
  color: #333333;
  font-size: 28rpx;
  text-align: right;
  width: 450rpx;
}
.pay_3 div:nth-of-type(1) {
  float: left;
  font-size: 28rpx;
  color: #333333;
  width: 315rpx;
}
.pay_3 div:nth-of-type(2) {
  float: right;
  color: #333333;
  font-size: 28rpx;
  text-align: right;
  width: 315rpx;
}
.pay_4 div:nth-of-type(1) {
  color: #ff4444;
  font-size: 20rpx;
  float: left;
  line-height: 100rpx;
  width: 450rpx;
}
.pay_4 div:nth-of-type(2) {
  color: #ff4444;
  width: 180rpx;
  height: 66rpx;
  border: 2rpx solid #ff4444;
  border-radius: 66rpx;
  box-sizing: border-box;
  text-align: center;
  line-height: 66rpx;
  float: left;
  margin-top: 17rpx;
  font-size: 28rpx;
}
</style>
